<template>
	<div style="width:85%;height:80%;margin-bottom: 5%;border: 1px solid white;background-color: rgba(255,255,255,0.2);">
    <div id="dreamIndexIcon">
			<img class="animated bounceInLeft  "  src="../../../assets/image/dream/纸飞机.png" >
		</div>
		<div class="animated bounceInRight delay-1s " id="dreamIndexText1">
			<img src="../../../assets/image/dream/主页面文字1.png" >
		</div>
		<div class="animated fadeInUp delay-2s" id="dreamIndexText2">
			<img src="../../../assets/image/dream/主页面文字2.png" >
			<hr />
		</div>
		<div  id="dreamIndexDetail">
			<div style="color: white;font-size: 25px;" id="dreamIndexDetaildiv" ></div>
		</div>
    <div class="dreamIndexLogo"><img src="../../../assets/image/dream/Indexlogo.png"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return{
        dazi:null
			}
		},
		mounted(){
			this.time()
		},
    methods:{
      time(){
        	var str = '在这个界面里，你可以众筹参与帮助有需要的人，或是助力完成他人正在努力实现的梦想。';
        	var i = 0;
        	this.dazi = setInterval(function() {
        		let divTyping = document.getElementById('dreamIndexDetaildiv');
        		if (i <= str.length) {
        			divTyping.innerHTML = str.slice(0, i++)+'_';
        		} else {
        			divTyping.innerHTML = str; //结束打字,移除 _ 光标
        			clearInterval(this.dazi);
        		}
        	},100)
      }
    },
		created() {

		},
    beforeDestroy() {
      clearInterval(this.dazi)
      this.dazi=null
    }
	}
</script>

<style scoped>
	#dreamIndexIcon img{
		float: left;
		width: 30%;
		height: 30%;
		margin: 5% 0 0 5%;
	}
	#dreamIndexText1 img{
		width: 50%;
		height: 50%;
		margin-right: 15%;
		margin-top: 5%;
	}
	#dreamIndexText2 img{
		width: 45%;
		height: 45%;
		margin-left: 15%;
	}
	#dreamIndexText2 hr{
		margin-top: 2%;
	}
	#dreamIndexDetail{
		width: 60%;height: 20%;margin-left: 40%;margin-top: 2%;
	}
  .dreamIndexLogo{
    position: absolute;
    width: 20%;height: 10%;
    top: 8%;left: 8%;
  }
  .dreamIndexLogo img{
    width: 100%;height: 100%;
  }
</style>
